let arr = [
    {x:-64, s:.83, z:1},
    {x:140, s:1,   z:2},
    {x:338, s:.83, z:1},
    {x:960, s:.83, z:1},
    {x:960, s:.83, z:1},
    {x:960, s:.83, z:1}
]
    function render(){
        let lbt =  document.querySelectorAll('.swiper .swiper-slide')
    lbt.forEach((item,i)=>{
        item.style.transform=`translateX(${arr[i].x}px) scale(${arr[i].s})`
        item.style.zIndex = arr[i].z
    })
    }
    render()
    

function prev(){
    let temp = arr.shift()
    arr.push(temp)

    render()

}

document.querySelector('.swiper .swiper-prev').onclick = prev


function next(){
    let temp = arr.pop()
    arr.unshift(temp)
    render()
}

document.querySelector('.swiper .swiper-next').onclick = next

document.querySelector('.swiper .swiper-wrapper').onclick = function(evt){
            let e = evt || window.event
            let target = e.target ||src.Element
            if(target.parentNode.style.transform.includes('64px')){
                prev()
            }
            if(target.parentNode.style.transform.includes('338px')){
               next()
            }
}